import React, {Component, Fragment} from "react";
import './app.css'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        }
        this.handleBtnClick = this.handleBtnClick.bind(this);
    }

    render() {
        // render函数return出去的内容必须是一个元素
        return (
            <Fragment>
                {/*如果this.state.show==true className=show ,否则是hide*/}
                <div className={this.state.show ? 'show' : 'hide'}>hello</div>
                <button onClick={this.handleBtnClick}>toggle</button>
            </Fragment>
        );
    }

    handleBtnClick() {
        this.setState((prevState) => ({
            show: !prevState.show
        }))
    }
}

export default App;